<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: #F5F5F5;
        }

        .header-container {
            padding: 15px;
            background-color: #fff;
        }

        .header-container .title {
            overflow: hidden;
            font-size: 16px;
            font-weight: 500;
            color: #191919;
        }

        .header-container .text-onrage {
            font-size: 14px;
            font-weight: 500;
            color: #FD9B43;
            min-width: fit-content;
            margin-left: 10px;
        }

        .header-container .text-gray {
            font-size: 12px;
            color: #BFBFBF;
            margin-top: 15px;
        }

        .header-container .text-green {
            font-size: 15px;
            font-weight: 500;
            color: #00CC83;
        }

        .header-container .text-dark {
            font-size: 12px;
            font-weight: 400;
            color: #808080;
            margin-top: 15px;
        }

        .tab-container {
            height: 40px;
            margin-top: 10px;
            background-color: #fff;
        }

        .tab-container .item {
            width: 90px;
            height: 100%;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #5A5A5A;
        }

        .tab-container .active {
            position: relative;
            width: 90px;
            height: 100%;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: #5AC2FF;
        }

        .tab-container .active::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 46px;
            height: 3px;
            margin-left: -23px;
            border-radius: 2px;
            background: #5AC2FF;
        }

        .box-fixed {
            position: fixed;
            left: 0;
            bottom: 0;
            padding: 10px 15px;
            width: 100%;
            height: 60px;
            background-color: #fff;
        }

        .box-fixed .btn-onrage {
            width: 100%;
            height: 100%;
            background: #FD9B43;
            border-radius: 20px;
            color: #fff;
            font-size: 15px;
            font-weight: 500;
        }

        .richtext-container {
            padding: 10px 15px;
            background-color: #fff;
        }

        .richtext-container * {
            max-width: 100%;
            width: auto;
            height: auto;
        }

        .list-container {
            padding: 0 15px;
            background-color: #fff;
        }

        .list-container .item {
            height: 55px;
            border-top: 1px solid #efefef;
        }

        .list-container .item:first-child {
            border-top: none;
        }

        .list-container .title {
            overflow: hidden;
            font-size: 14px;
            font-weight: 400;
            color: #191919;
            padding-right: 10px;
        }

        .list-container .icon-lock {
            width: 19px;
            height: 24px;
            min-width: 19px;
        }

        .list-container .icon-check {
            width: 18px;
            height: 18px;
            min-width: 18px;
            margin-right: 10px;
        }

        .list-container .icon-arrow {
            width: 15px;
            height: 15px;
            min-width: 15px;
        }

        .text-tips {
            margin-top: 20px;
            font-size: 12px;
            font-weight: 400;
            color: #BFBFBF;
            text-align: center;
        }

        .reason-container {
            padding: 15px;
            background-color: #fff;
            margin-top: 10px;
        }

        .reason-container .title {
            font-size: 15px;
            font-weight: 400;
            color: #808080;
        }

        .reason-container .content {
            font-size: 15px;
            font-weight: 400;
            color: #191919;
            line-height: 21px;
            margin-top: 10px;
        }

        .tips {
            color: #808080;
            font-size: 14px;
            text-align: center;
            padding: 20px 0;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="vueApp" v-cloak>
        <div class="header-container">
            <div data-flex="cross:center">
                <div class="title" data-flex-box="1">{{info.courseWareName}}</div>
                <div class="text-onrage" v-if="status == 0">免费</div>
                <div class="text-onrage" v-else-if="status == 1">{{info.payAmount}}积分</div>
                <div class="text-green" v-else-if="status == 2">已购买</div>
                <!-- <div class="text-onrage" v-show="status === 3">已下架</div>
                <div class="text-onrage" v-show="status === 4">未通过</div> -->
            </div>
            <!-- <div class="text-dark" v-show="status === 2">获得积分：265积分&nbsp;&nbsp;&nbsp;&nbsp;购买量：256</div> -->
            <div class="text-gray">{{info.signName}}</div>
        </div>
        <!-- <div class="reason-container" v-show="status === 3 || status === 4">
            <div class="title">原因</div>
            <div class="content">平台要求更新课件</div>
        </div> -->
        <div class="tab-container" data-flex>
            <div :class="tabActive === 0 ? 'active' : 'item'" data-flex="cross:center main:center" @click="tabActive = 0">介绍详情</div>
            <div :class="tabActive === 1 ? 'active' : 'item'" data-flex="cross:center main:center" @click="tabActive = 1">课件({{listData.length}})</div>
        </div>
        <div class="richtext-container" v-show="tabActive === 0">
            <div v-html="info.courseWareDetails"></div>
        </div>
        <div class="list-container" v-show="tabActive === 1">
            <div v-if="status === 2 || status === 0">
                <div class="item" v-for="item,index in listData" data-flex="cross:center" @click="handleItem(item,index)">
                    <img @click.stop="handleCheckWare(index)" :src="checkedIndexs.indexOf(index) == -1 ? '../../image/ui/uncheck.png' : '../../image/ui/check.png'" alt="" class="icon-check">
                    <div class="title one-line" data-flex-box="1">{{item.contentName}}.{{item.contentType.toUpperCase()}}</div>
                    <img src="../../image/ui/ar_gray.png" alt="" class="icon-arrow">
                </div>
            </div>
            <div v-else>
                <div class="item" v-for="item,index in listData" data-flex="cross:center">
                    <div class="title one-line" data-flex-box="1">{{item.contentName}}.{{item.contentType.toUpperCase()}}</div>
                    <img src="../../image/ui/lock_kj.png" alt="" class="icon-lock">
                </div>
            </div>
            <div class="tips" v-show="!listData.length">
                当前暂无可用的课件
            </div>
        </div>
        <!-- <div class="text-tips" onclick="openEnterFrm()" v-show="(status === 2 || status === 0) && tabActive === 1 && listData.length">选择课件发送到邮箱</div> -->
        <div style="height: 60px;" v-show="status < 3 && status > -1"></div>
        <div class="box-fixed" v-show="status < 3 && status > -1">
            <div class="btn-onrage" onclick="isSetPassword(1)" v-if="status === 1" data-flex="cross:center main:center">
                兑换
            </div>
            <div class="btn-onrage" onclick="openEnterFrm()" v-else data-flex="cross:center main:center">
                发送到邮箱
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-sha1.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    var docReader;
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        docReader = api.require('docReader');
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                // 课件id
                kjId: pageParam.kjId,
                // 课件数据
                info: {},
                // 课件列表
                listData: [],
                pageNo: 1,
                pageSize: 10,
                // 选中的tab
                tabActive: 0,
                // 多选
                checkedIndexs: [],
                // 课件状态 0 免费 1 未购买 2 已购买  3 已下架 4 未通过
                status: -1
            }
        });
        getData();
    }

    // 获取课件数据
    function getData() {
        var params = {
            id: vm.kjId
        };
        var url = 'courseWare/findCourseWareDetail';
        var callback = function(data) {
            vm.info = data;
            if(data.payMethod == 1) {
                vm.status = 0;
            } else if(data.payMethod == 2 && data.isBuy == 0) {
                vm.status = 1;
            } else if(data.payMethod == 2 && data.isBuy == 1) {
                vm.status = 2;
            }
            getListData();
        };
        POST(url, params, callback);
    }

    // 获取课件列表
    function getListData() {
        var params = {
            courseWareId: vm.kjId
        };
        var url = 'courseWare/findCourseWareContentList';
        var callback = function(data) {
            vm.listData = data.listData;
        };
        POST(url, params, callback);
    }

    // 点击item
    function handleItem(item,index) {
        console.error(index);
        if(vm.status === 1) {
            fnToast('解锁课程后可预览');
        } else if(',EXCEL,DOC,DOCX,PDF,WORD,'.indexOf(','+item.contentType.toUpperCase()+',') != -1) {
            console.error(JSON.stringify(item));
            api.showProgress({
                title: '努力加载中...',
                text: '先喝杯茶...',
                modal: true
            });
            api.download({
                url: item.contentUrl,
                report: false,
                cache: true,
                allowResume: true
            }, function(ret, err) {
                if (ret.state == 1) {
                    //下载成功
                    api.hideProgress();
                    docReader.open({
                        path: ret.savePath,
                        autorotation: false
                    }, function(ret, err) {
                        if (ret.status) {
                            fnToast('打开成功');
                        } else {
                            ret.error1 = err;
                            console.error(JSON.stringify(ret));
                            var msg = '课件文件不存在，或课件格式不支持';
                            if(err.code == 1) {
                                msg = '课件文件不存在';
                            }else if(err.code == 2) {
                                msg = '课件格式不支持';
                            }
                            fnToast(msg);
                        }
                    });
                } else if (ret.state == 2) {
                    console.error(JSON.stringify(err));
                    fnToast('打开失败');
                }
            });
            // fnOpenPublicWin('课件预览', 'video/courseware_preview', {
            //     contentId: item.id
            // });
        }else {
            fnToast('格式不支持预览');
        }
    }

    // 选中课件
    function handleCheckWare(index) {
        if(vm.checkedIndexs.indexOf(index) == -1) {
            // 选中
            vm.checkedIndexs.push(index);
        }else {
            // 取消选中
            vm.checkedIndexs.splice(vm.checkedIndexs.indexOf(index), 1)
        }
    }

    // 发送到邮箱
    function openEnterFrm() {
        if(!vm.checkedIndexs.length) {
            fnToast('请先选择您要发送的课件');
            return;
        }
        fnOpenFrame({
            name: 'enter_frm',
            url: './enter_frm.html',
            rect: {
                x: 0, y: 0, w: 'auto', h: 'auto'
            },
            bgColor: 'rgba(0,0,0,0.5)',
            pageParam: {
                title: '我们将课件发送到这个邮箱',
                placeholder: '请输入邮箱地址',
                winName: api.winName,
                frameName: api.frameName
            }
        });
    }

    // 发送到邮箱回调
    function fnSubmit(content) {
        if(/^\w+@{1}\w+\.{1}[a-zA-Z]+$/.test(content)) {
            var ids = [];
            vm.listData.forEach(function(item,index) {
                if(vm.checkedIndexs.indexOf(index) !== -1) {
                    ids.push(item.id);
                }
            });
            var params = {
                courseWareId: vm.kjId,
                contentIds: ids.join(','),
                emailAddress: content
            };
            var callback = function(data) {
                fnToast('课件已发送到' + content);
            };
            POST('courseWare/sendEmailForCourseWare', params, callback);
        } else {
            fnToast('邮箱格式错误,请重新输入');
        }
    }

    // 判断密码是否设置
    function isSetPassword(type) {
        var params = {
            payPassword: ''
        };
        var callback = function(data) {
            if(data.type == 0) {
                fnToast('请先设置支付密码');
                fnOpenPublicWin('修改支付密码','teacher/change_pay_pwd');
            } else {
                apiPrompt(type);
            }
        };
        POST('my/comparePayPassword', params, callback);
    }

    // 打开输入弹窗
    function apiPrompt(type) {
        api.prompt({
            title: '请输入支付密码',
            type: 'password',
            buttons: ['确定', '取消']
        }, function(ret, err) {
            if(ret && ret.buttonIndex == 1) {
                isSame(type, ret.text);
            }
        });
    }

    // 判断密码是否正确 type 为支付方式  text 为输入的内容
    // type 1 积分 2 余额
    function isSame(type, text) {
        if(text === '') {
            fnToast('密码不能为空');
            apiPrompt(type);
            return;
        }
        if(text.length !== 6 || Number(text) + '' == NaN + '') {
            fnToast('密码必须为6位纯数字');
            apiPrompt(type);
            return;
        }
        if(type == 1) {
            handleIntelPay(text)
        }

        // var params = {
        //     payPassword: SHA1(text)
        // };
        // var callback = function(data) {
            // if(data.type == 1) {
            //     if(type === 1) {
            //         // 积分
            //         handleIntelPay();
            //     } else if(type === 2) {
            //         // 余额
            //         handleAccountPay();
            //     }
            // } else {
            //     fnToast('密码错误');
            //     apiPrompt(type);
            // }
        // };
        // POST('my/comparePayPassword', params, callback);
    }

    // 积分购买
    function handleIntelPay(text) {
        var params = {
            id: vm.kjId,
            payPassword: SHA1(text)
        };
        var callback = function(data) {
            if(!data.type) {
                fnToast('购买成功');
                vm.status = 2;
            } else {
                fnToast('密码错误');
                apiPrompt(type);
            }
        };
        POST('courseWare/buyCourseWare', params, callback);
    }
</script>
</html>
